<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFD101"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<view class="p0-8"><uni-search-bar placeholder="搜索内容" bgColor="#FFFFFF" @confirm="search" /></view>
				<view class="p0-15">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
						<uni-data-checkbox mode="tag" selectedColor="#FFD101" v-model="selectType" @change="onSelectType" :localdata="baikeType"></uni-data-checkbox>
					</scroll-view>
				</view>
				<uni-row class="">
					<uni-col v-for="item in baikeInfo.list" :key='item.id' :span="12" >
						<view class="p8 mt10" @click="onLink('info/index',item.id)"><image style="width: 100%;" :src="item.img"></image></view>
						<view class="p0-8 title">{{item.title}}</view>
						<uni-row class="p8">
							<uni-col :span="12">
								<view class="text-left p0-8 company">{{item.company_name}}</view>
							</uni-col>
							<uni-col :span="12">
								<view class="text-right p0-8 company"><uni-icons type="eye" size="15"></uni-icons>{{item.click_um}}</view>
							</uni-col>
						</uni-row>
					</uni-col>
				</uni-row>
			</view>
			<view v-show="current === 1">
				<view class="p0-8"><uni-search-bar placeholder="搜索内容" bgColor="#EEEEEE" @confirm="search" /></view>
				<view class="p0-15">
					<uni-data-checkbox mode="tag" selectedColor="#FFD101" v-model="selectType" :localdata="fileType"></uni-data-checkbox>
				</view>
				<uni-list :border="true">
					<uni-list-chat v-for="item in fileInfo.list" :key='item.id' :title="item.title" :avatar="item.img" :note="'　阅读：' + item.click"></uni-list-chat>
				</uni-list>
			</view>
			<view v-show="current === 2">
				<view class="p0-15">
					<uni-data-checkbox mode="tag" selectedColor="#FFD101" v-model="selectType" :localdata="nodeType"></uni-data-checkbox>
				</view>
				<view class="p0-15">
					<view class="node" v-for="e in nodeInfo" :key='e.id'>
						<uni-title type="h2" :title="e.name" align="center"></uni-title>
						<uni-grid :column="4" :highlight="true" :show-border="false">
							<uni-grid-item v-for="(item,index) in e.children" :index="index" :key="index">
								<view class="grid-item-box" style="background-color: #fff;">
									<view class="text-center"><image class="node-image" :src="item.images"></image></view>
									<text class="text">{{item.name}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				form:{page:1,type:0},
				current: 0,
				items:['百科','资料','工艺'],
				
				selectType:0,
				baikeType: [],
				baikeInfo:{list:[],count:0,num:10,page:1},
				
				fileType: [],
				fileInfo:{list:[],count:0,num:10,page:1},
				
				nodeType: [],
				nodeInfo:{}
			}
		},
		onShow() {
			this.onGetBaikeType()
			this.onGetBaike()
		},
		methods: {
			onGetBaikeType(){
				let _this = this
				this.$request('/api2/wiki_type','GET').then(res => {
					_this.baikeType = _this.mapType(res.data.wiki)
				}).catch(err => {
					console.log(err)
				})
			},
			onGetBaike(){
				let _this = this
				this.$request('/api2/wiki_next_page','POST',this.form).then(res => {
					_this.form.page = res.data.page + 1
					_this.baikeInfo.count = res.data.count
					_this.baikeInfo.page = res.data.page
					_this.baikeInfo.num = res.data.num
					_this.baikeInfo.list.push(...res.data.list) 
				}).catch(err => {
					console.log(err)
				})
			},
			onGetFileType(){
				let _this = this
				this.$request('/api2/information_type','GET').then(res => {
					_this.fileType = _this.mapType(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			onGetFile(){
				// information
				// information_type
				let _this = this
				this.$request('/api2/information','POST',this.form).then(res => {
					_this.form.page = res.data.page + 1
					_this.fileInfo.count = res.data.count
					_this.fileInfo.page = res.data.page
					_this.fileInfo.num = res.data.num
					_this.fileInfo.list.push(...res.data.list) 
				}).catch(err => {
					console.log(err)
				})
			},
			onGetNodeType(){
				let _this = this
				this.$request('/api2/node_type','GET').then(res => {
					_this.nodeType = _this.mapType(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			onGetNode(){
				let _this = this
				this.$request('/api2/node_children_type/'+_this.selectType,'GET').then(res => {
					_this.form.page = res.data.page + 1
					_this.nodeInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onReachBottom() {
				if(this.current == 0){
					this.onGetBaike()
				}
				
				if(this.current == 1){
					this.onGetFile()
				}
				
				if(this.current == 2){
					this.onGetNode()
				}
				
			},
			onClickItem(e){
				this.form.page = 1
				this.form.type = 0
				this.selectType = 0
				if(e.currentIndex == 0){
					this.onGetBaikeType()
					this.baikeInfo.list = []
					this.onGetBaike()
				}
				
				if(e.currentIndex == 1){
					this.onGetFileType()
					this.fileInfo.list = []
					this.onGetFile()
				}
				
				if(e.currentIndex == 2){
					this.onGetNodeType()
					this.onGetNode()
				}
				this.current = e.currentIndex
			},
			onSelectType(e){
				this.form.page = 1
				this.form.type = e.detail.data.id
				this.baikeInfo.list = []
				this.onGetBaike()
			},
			search(e){
				
			},
			onClickBaike(e){
				console.log(e)
			},
			mapType(data){
				let obj = { name: '全部', id: 0 }
				data.unshift(obj)
				return data.map((item) => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/index/"+url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.scroll-view_H {white-space: nowrap;width: 100%;}
.title{font-size: .9rem;color: #111;font-weight: 600;height: 40px;}
.company{font-size: .8rem;margin-top: 5px;}
.node{border-top: 1px solid #EEE;padding: 24px 0px;}
.node-image{width: 55px;height: 55px;}
.text {font-size: 14px;margin: 5px 5px 5px 5px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}
</style>
